<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PoC for BOI API v0.1</title>
<style>
    div.layout {
        border: solid 1px black;
    }
    iframe { width:100%;min-height:600px;}
    td {vertical-align: top;}
    table {width:100%;}
    input {width:300px;}
    .ui-tabs-panel {width:600px; height:600px;}
</style>
<link href="../api/css/custom-theme/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<link href="../api/js/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
<script src="../api/js/jquery-1.8.3.js"></script>
<script src="../api/js/jquery-ui-1.9.2.custom.js"></script>
<script src="../api/js/jquery.cookie.js" type="text/javascript"></script>
<script src="../api/js/jquery.dynatree.js" type="text/javascript"></script>
<script type="text/javascript" src="../api/boi.js"></script>
<script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>

<script type="text/javascript">
    function LoadTree(data){
        $("#tree").dynatree({
            clickFolderMode: 2, // 1:activate, 2:expand, 3:activate and expand
            children: data,
            // In real life we would call a URL on the server like this:
            //initAjax: {
            //      url: "http://127.0.0.1/dvb/api/data/report_hier.json"
            //      },
            onActivate: function(node) {
                //store report vars in context
                var reportid = node.data.key;
                var report = BOI.context.reports[reportid];
                BOI.context.lastReport = report;

                BOI.loadReportMeta(BOI.context.reports[report.id], function () {
                    //show actual report after formulating the url
                    addTab(report,report.tech_name);
                },'Y');
            },
            onPostInit: function()
            {
                $("#tree").dynatree("getRoot").visit(function(node){
                    node.expand(true);
                });
            }
        });
    }
</script>

<script>
var db = "TEST_BI_APP";
var tabTitle = "tabtitle",
        tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
        tabContentTemplate = '<iframe name="{src}"></iframe>',
        tabCounter = 2;

function showVarInfo()
{
    //display context variables
    var context_variables = "<table>";
    for( var i in BOI.context.variables)
    {
        var name = BOI.context.variables[i].name;
        var data = BOI.context.variables[i].getInfo();
        context_variables += "<tr><td>"+ name +"</td><td>"+ data +"</td></tr>"
    }
    context_variables+= "</table>";
    $('#context_variables').html(context_variables);
}

var createSwfObject = function(src, attributes, parameters) {
    var i, html, div, obj, attr = attributes || {}, param = parameters || {};
    attr.type = 'application/x-shockwave-flash';
    if (window.ActiveXObject) {
        attr.classid = 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000';
        param.movie = src;
    }
    else {
        attr.data = src;
    }
    html = '<object';
    for (i in attr) {
        html += ' ' + i + '="' + attr[i] + '"';
    }
    html += '>';
    for (i in param) {
        html += '<param name="' + i + '" value="' + param[i] + '" />';
    }

    html+= '<EMBED';
    for (i in attr) {
        html += ' ' + i + '="' + attr[i] + '"';
    }
    html += '></EMBED>';/**/

    html += '</object>';
    div = document.createElement('div');
    div.innerHTML = html;
    obj = div.firstChild;
    div.removeChild(obj);
    return obj;
};

function addTab(report,title) { //bex3,bex7,webi
    var label = title,
            id = "tabs-" + tabCounter,
            li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
            tabContentHtml = tabContentTemplate.replace(/\{src\}/g, title);
    tabs.find(".ui-tabs-nav").append(li);
    tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>");
    tabs.tabs("refresh");

    //alert(BOI.context.generateReportUri(report).fullUrl);
    BOI.openReport(report.id, report.type, undefined, false, title);

    //display report variables
    var report_variables = "<table>";
    for( var i in BOI.context.reports[report.id].variables)
    {
        var name = BOI.context.reports[report.id].variables[i].name;
        var data = BOI.context.reports[report.id].variables[i].getInfo();
        report_variables += "<tr><td>"+ name +"</td><td>"+ data +"</td></tr>"
    }
    report_variables+= "</table>";
    $('#report_variables').html(report_variables);

    showVarInfo();

    tabCounter++;
}

var tabs;

$(function () {

    BOI.setLogWindow(document.getElementById("status"));
    BOI.debugMode = true;

    //tabs
    tabs = $("#tabs").tabs();
    //accordion
    $( "#accordion" ).accordion(
            {
                heightStyle: "fill"
            }
    );
    //buttons
    $( "input[type=button]" ).button();
    // close icon: removing the tab on click
    $("#tabs span.ui-icon-close").live("click", function () {
        var panelId = $(this).closest("li").remove().attr("aria-controls");
        $("#" + panelId).remove();
        tabs.tabs("refresh");
    });
});

function loadCatalog() {

    db = $('#db_id').val();
    BOI.loadReportCatalog(db, BOILib.OutputTypes.JSON, function()
    {
        showVarInfo();

    });
}

function showReport() {
    //store report vars in context
    var reportid = $('#reports').val();
    var report = BOI.context.reports[reportid];
    BOI.context.lastReport = report;

    BOI.loadReportMeta(BOI.context.reports[report.id], function () {
        //show actual report after formulating the url
        addTab(report,report.tech_name);
    },'Y');
}
//testing only with results showing on monitor log//
function loadJSONCatalog()
{
    //alert(typeof $.param(BOI.context.reportCatalogJSON));
    db = $('#db_id').val();
    BOI.loadReportCatalog(db,BOILib.OutputTypes.JSON,
            function(){ //success function
                LoadTree(BOI.context.reportCatalogTree);
                showVarInfo();
            });
}
function createVariable()
{
    var varname = prompt("Enter Variable Name:", "");
    var varvalue = prompt("Enter Variable Value", "");
    BOI.createContextVariable(varname,varvalue,BOILib.VariableTypes.String,BOILib.SelectionTypes.Single);
    showVarInfo();

}
function createMultiVariable()
{
    var varname = prompt("Enter Variable Name:", "");
    var varvalues = prompt("Enter Variable Values, separated by comma", "");
    BOI.createContextVariable(varname,varvalues,BOILib.VariableTypes.String,BOILib.SelectionTypes.Multiple);
    showVarInfo();

}
function setVariable()
{
    BOI.setContextVariable('X_FLTCAT','2222');
    showVarInfo();
}
function generateOpenDocument()
{
    //specified in case custom server used, otherwise uses default server..
    //BOI.urlForServer = "dvb.aramco.com.sa:1111";

    BOI.app_id = db; //required to tell boi about the app identity
    var id = $('#report').val(); //get id from input box
    var type = $('#type').val(); //get id from input box (refer to BOILib.ReportTypes for proper names)
    var report = BOI.createReport(id, type); //create the report object in BOI Context

    //get variables from BO server
    BOI.loadReportMeta(report,function(data){
        //this returns the url
        $('#status').val(BOI.context.generateReportUri(report).fullUrl);

        //this opens the report
        BOI.openReport(id,type);
    },'Y');

    //these are custom variables created at runtime
    /*
     BOI.createContextVariable("simple","999999","string","S", report); //sample for report variable only
     BOI.createContextVariable("date",new Date(2004,10,15),"date","S"); //sample for context variable only
     BOI.createContextVariable("multi","999999,4444,333,222","string","M");
     BOI.createContextVariable("range","[2005..2012)","number","R");
     */

    /** More Complex examples for full control **/
    /*
     //multiple dates
     var variable = BOI.createContextVariable("multi",null,"date","M");
     variable.values.push(new Date(2004,05,14));
     variable.values.push(new Date(2008,08,19));
     //...add more if you need

     //date range
     var variable2 = BOI.createContextVariable("range",null,"date","R");
     variable2.ranges.push(new BOILib.Range('[',new Date(2004,01,20), new Date(2007,10,16),')'));
     */

}
function generateBex7()
{
    var array = [];
    array.push('11111');
    array.push('112213');
    array.push('125468');

    var report = BOI.createReport("ZAC_03_WEBI_Q18", BOILib.ReportTypes.Bex7);
    BOI.createContextVariable("X_AC_ORG","30002061","string","S", report);
    BOI.createContextVariable("ARRAY",array,"string","S", report);
    $('#status').val(BOI.context.generateReportUri(report).fullUrl);
    //BOI.openReport(report.id,report.type,undefined,true,'_blank');
}
function generateBex3()
{
    var report = BOI.createReport("ZAC_03_WEBI_Q18", BOILib.ReportTypes.Bex3);
    BOI.createContextVariable("simple","999999","string","S", report);
    $('#status').val(BOI.context.generateReportUri(report).fullUrl);
}
function generateXcelsius()
{
    var report = BOI.createReport('MYXCELSIUS', BOILib.ReportTypes.XcelsiusLocal);
    report.url = 'swf/sample_eic_flash_vars.swf';
    BOI.createContextVariable("url1","RRRRRR","string","P", report); //sample for report variable only
    BOI.createContextVariable("url2","AAAAAA","string","P", report); //sample for report variable only

    //this returns the url
    //alert(BOI.context.generateReportUri(report, true).fullUrl);

    //open
    addTab(report, report.id);
}
function sendEIC()
{
    var reportid = prompt("REPORT ID:", "MYXCELSIUS");
    var EIC = prompt("EIC variable name:", "url1");
    var EICval = prompt(EIC + " variable value:", "123456789");

    getMovie(reportid).setDataSource(EIC, EICval);

}

function setSWFIsReady(movieName)
{
    alert('swf is ready');
    var sendCurrentValue = true;  // false (do not pass current value), true (pass current value via callback).

    getMovie(movieName).addDataSourceChangeEventListener("url1", "rangeChangeHandler", sendCurrentValue);
}
function rangeChangeHandler(movieName, rangeName)
{
    // Get the new range value.
    var newValue = getMovie(movieName).getDataSource(rangeName);
    alert(newValue);
}
function getMovie(movieName)
{
    var movie = undefined;
    if (navigator.appName.indexOf("Microsoft") != -1) {
        movie = document.getElementById(movieName);
    } else {
        movie = document[movieName];
    }
    return movie;
}

var cycle = 1;
function loadF4(start,cycle)
{
    var id = $('#report').val(); //get id from input box
    var type = $('#type').val(); //get id from input box (refer to BOILib.ReportTypes for proper names)
    var varname = $('#variable').val();

    BOI.loadF4Values(varname,start,cycle,function(data){
        var output = '';
        var index = (start - 1) * cycle;
        for(var i in data.values)
            output += index++ + '. ' + data.values[i].name +' = ' + data.values[i].value + '\n';

        output = " F4 URL = " + data.url +
                ", TOTAL AVAILABLE F4 = " + data.total +
                ", CURRENT CYCLE = " + data.cycle +
                ", PAGE SIZE = " + data.records +
                ", SHOWING " + ((data.cycle - 1) * data.records) + " to " + ((data.cycle) * data.records) +
                "\n\n------------- Data Listing ---------------\n\n" + output;
        $('#status').val(output);
    }, id, undefined, undefined, undefined, type);
}
function searchF4(start,cycle)
{
    var id = $('#report').val(); //get id from input box
    var type = $('#type').val(); //get id from input box (refer to BOILib.ReportTypes for proper names)
    var term = $('#term').val(); //search term
    var varname = $('#variable').val();

    BOI.loadF4Values(varname,start,cycle,function(data){
        var output = '';
        var index = (start - 1) * cycle;
        for(var i in data.values)
            output += index++ + '. ' + data.values[i].name +' = ' + data.values[i].value + '\n';

        output = " F4 URL = " + data.url +
                ", TOTAL AVAILABLE F4 = " + data.total +
                ", CURRENT CYCLE = " + data.cycle +
                ", PAGE SIZE = " + data.records +
                ", SHOWING " + ((data.cycle - 1) * data.records) + " to " + ((data.cycle) * data.records) +
                "\n\n------------- Data Listing ---------------\n\n" + output;
        $('#status').val(output);
    }, id, term, undefined, undefined, type, true);
}
function loadF4Query(start,cycle)
{
    var report = BOI.createReport("ZAC_03_HRSD_WEBI_Q01", "bex3"); //report object
    var variables = [];
    variables.push(BOI.createContextVariable("X_ACSYST","","string","M", report)); //variable for the report
    variables.push(BOI.createContextVariable("X_HRROLE","","string","M", report)); //variable for the report
    variables.push(BOI.createContextVariable("X_AUTHOB","","string","M", report)); //variable for the report
    variables.push(BOI.createContextVariable("X_AC_OBJTYP","","string","M", report)); //variable for the report
    variables.push(BOI.createContextVariable("X_AGRLOH","","string","M", report)); //variable for the report
    variables.push(BOI.createContextVariable("X_AGRLOW","","string","M", report)); //variable for the report
    variables.push(BOI.createContextVariable("X_AGRHIG","","string","M", report)); //variable for the report

    for(var i in variables)
        variables[i].f4type = BOILib.F4Modes.BWReport;

    variables[0].f4query = "ZAC_03_HRSD_VARV_SYSTEM";
    variables[1].f4query = "ZAC_03_HRSD_VARV_ROLES";
    variables[2].f4query = "ZAC_03_HRSD_VARV_AUTHOBJ";
    variables[3].f4query = "ZAC_03_HRSD_VARV_FIELD";
    variables[4].f4query = "ZAC_03_HRSD_VARV_LHVAL";
    variables[5].f4query = "ZAC_03_HRSD_VARV_LHVAL";
    variables[6].f4query = "ZAC_03_HRSD_VARV_LHVAL";

    //sample test for set values
    variables[0].values = ["DVBCLNT142"];
    //variables[1].values = ["/BMC/PATROL"];
    variables[2].values = ["S_RS_COMP"];
    //variables[3].values = ["PERSA"];

    for(var i in variables)
    {
        for(var j in variables)
        {
            if(variables[i] != variables[j]) //do not depend on self, but depend on all others
            {
                //dependecy
                variables[i].dependencies[variables[j].name] = variables[j]; //assign dependency (myvar depends on depvar to get filtered F4)
            }
        }
    }

    for(var i in variables)
    {
        BOI.loadF4Values(variables[i].name,start,cycle,function(data){
            var output = '';
            var index = (start - 1) * cycle;
            for(var i in data.values)
                output += index++ + '. ' + data.values[i].name +' = ' + data.values[i].value + '\n';

            output ="\n\n\n\n Variable = " + data.varname +
                    ", F4 URL = " + data.url +
                    ", TOTAL AVAILABLE F4 = " + data.total +
                    ", CURRENT CYCLE = " + data.cycle +
                    ", PAGE SIZE = " + data.records +
                    ", SHOWING " + ((data.cycle - 1) * data.records) + " to " + ((data.cycle) * data.records) +
                    "\n\n------------- Data Listing ---------------\n\n" + output;
            $('#status').val( $('#status').val() + output);
        }, report.id);
    }

}
function loadReportMeta()
{
    BOI.app_id = db; //required to tell boi about the app identity
    var id = $('#report').val(); //get id from input box
    var type = $('#type').val(); //get id from input box (refer to BOILib.ReportTypes for proper names)
    var reportObj = BOI.createReport(id, type); //create the report object in BOI Context

    BOI.loadReportMeta(reportObj, function(data){
        //data is the report object

        var reportVars = data.variables; //hashset of variable objects

        var output = "--------------- Report Variables in BOI Context ---------------------\n";
        output += "Report ID:\t\t" + data.id + '\n';
        output += "Report Techname:\t\t" + data.tech_name + '\n';
        output += "Report Type:\t\t" + data.type + '\n';
        output += "Report URL:\t\t" + BOI.context.generateReportUri(reportObj, true).fullUrl + '\n';
        output += "--------------------------------------------------\n\n";

        for(var i in reportVars) //get variables for this report
        {
            var deps = "";
            for(var dep in reportVars[i].dependencies) //get dependencies for each variable
                deps += reportVars[i].dependencies[dep].name + '=' + reportVars[i].dependencies[dep].value + "; ";

            output += "---------------------------------------"
                    + "\nVariable Name:\t\t" + reportVars[i].name
                    + "\nDescription:\t\t" + reportVars[i].description
                    + "\nDefault Value:\t\t" + reportVars[i].value
                    + '\nSelection Type:\t\t' + reportVars[i].seltype
                    + '\nData Type:\t\t' + reportVars[i].type
                    + '\nDepends on:\t\t' + deps

                    + '\nVARTYP:\t\t' + reportVars[i].VARTYP
                    + '\nVPROCTP:\t\t' + reportVars[i].VPROCTP
                    + '\nENTRYTP:\t\t' + reportVars[i].ENTRYTP
                    + '\nIOBJNM:\t\t' + reportVars[i].IOBJNM
                    + '\nDEF_VAL:\t\t' + reportVars[i].DEF_VAL
                    + '\nURL_PARAM:\t\t' + reportVars[i].URL_PARAM
                    + '\nQUERY:\t\t' + reportVars[i].f4query
                    + '\n---------------------------------------\n\n';
        }

        $('#status').val(output); //show in debug window
    },'Y');
}
</script>
</head>
<body>

<table>
    <tr>
        <td><h1>PoC for BOI API v0.2</h1></td>
        <td>
            Dashboard ID:<input id="db_id" type="text" onchange="db = $(this).val()" value="TEST_BI_APP" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <table>
                <colgroup>
                    <col width="250px;">
                    <col width="950px;">
                </colgroup>
                <tr>
                    <td style="height: 100%;width:300px;">
                        <div id="accordion" >
                            <h3>Commands</h3>

                            <div>
                                <div>
                                    Enter Report ID:<br/>
                                    <input id="report" type="text" value="" />
                                    <br/>Enter Report type To Load its meta:<br/>
                                    <input id="type" type="text" value="" />
                                    <br/>Enter Variable To Load its f4 values:<br/>
                                    <input id="variable" type="text" value="TRS_EMP" />
                                    <br/>Enter search term:<br/>
                                    <input id="term" type="text" value="Ali" />
                                </div>
                                <input type="button" onclick="loadCatalog()" value="BOI.loadReportCatalog(db,'xml', fn)" /><br/>
                                <input type="button" onclick="loadJSONCatalog()" value="BOI.loadReportCatalog(db,'json', fn)" /><br/>
                                <input type="button" onclick="createVariable()" value="BOI.createContextVariable(var,val)" /><br/>
                                <input type="button" onclick="createMultiVariable()" value="BOI.createContextVariable(var,vals,type,seltype)" /><br/>
                                <input type="button" onclick="setVariable()" value="BOI.setVariable('X_FLTCAT','2222')" /><br/>
                                <input type="button" onclick="generateOpenDocument()" value="OpenDocument Test" /><br/>
                                <input type="button" onclick="generateBex3()" value="Bex3 Test" /><br/>
                                <input type="button" onclick="generateBex7()" value="Bex7 Test" /><br/>
                                <input type="button" onclick="generateXcelsius()" value="Generate Xcelsius URL" /><br/>
                                <input type="button" onclick="sendEIC()" value="SEND EIC Variable" /><br/>
                                <input type="button" onclick="loadF4(cycle++,10)" value="loadF4Values(var,cycle++,records, fn)" /><br/>
                                <input type="button" onclick="searchF4(cycle++,10)" value="loadF4Values(var,cycle++,records, fn)" /><br/>
                                <input type="button" onclick="loadF4Query(cycle++,10)" value="loadF4Values from Query" /><br/>
                                <input type="button" onclick="loadReportMeta()" value="loadReportMeta(report, fn)" /><br/>
                                <a



href="open_report.htm?id=123&type=BO&target=_blank&lsSVAR_1=9999&lsMVAR_2=aa;bb;cc&lsRVAR_3=[2000..2008)&lsSMyDate=Date(2010,11,16)&lsMDates=Date(2000,5,19);Date(2012,12,20)&lsRDateRange=[Date(2010,3,8)..Date(2005,9,23)]" target="boi_open_report"
                                        title="test webi-api linkage">Web-API Link Test to open report</a>
                            </div>
                            <h3>Report Catalog</h3>
                            <div>
                                <div id="tree" style="width: 300px;"> Please Load the Catalog and then JSON</div>
                            </div>
                            <h3>Context Variables</h3>
                            <div>
                                <div id="context_variables" style="width: 300px;"></div>
                            </div>
                            <h3>Report Variables</h3>
                            <div>
                                <div id="report_variables" style="width: 300px;"></div>
                            </div>
                        </div>

                    </td>
                    <td>

                        <div id="tabs">
                            <ul>
                                <li><a href="#tabs-1">Home</a></li>
                            </ul>
                            <div id="tabs-1">
                                <h1>Welcome to BOI API Tester v0.1</h1>
                                <p>Trace Log</p>
                                <input type="button" value="Refresh" onclick="$('#status').val(BOI.log)" />
                                <textarea id="status" style="width:700px;height:300px" wrap="off"></textarea>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>